<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view">
      <el-row class="ml10" v-show="showSearch">
        <el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList" ref="queryRef">
          <el-form-item label="患者姓名" prop="patientName">
            <el-input placeholder="请输入姓名" style="max-width: 180px" v-model="state.queryForm.patientName" clearable />
          </el-form-item>
          <el-form-item label="身份证号" prop="identificationNumber">
            <el-input placeholder="请输入身份证号" style="max-width: 180px" v-model="state.queryForm.identificationNumber"
              clearable />
          </el-form-item>
          <el-form-item label="手机号" prop="phoneNumber">
            <el-input placeholder="请输入手机号" style="max-width: 180px" v-model="state.queryForm.phoneNumber" clearable />
          </el-form-item>
          <el-form-item>
            <el-button @click="getDataList" icon="search" type="primary"> {{ $t('common.queryBtn') }} </el-button>
            <el-button @click="resetQuery" icon="Refresh">{{ $t('common.resetBtn') }}</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <div class="mb8" style="width: 100%">
          <right-toolbar v-model:showSearch="showSearch" :export="'pig_patientBase_export'" @exportExcel="exportExcel"
            class="ml10 mr20" style="float: right;" @queryTable="getDataList"></right-toolbar>
        </div>
      </el-row>
      <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
        :header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
        @sort-change="sortChangeHandle">
        <el-table-column type="selection" width="40" align="center" />
        <el-table-column prop="patientName" label="姓名" show-overflow-tooltip />
        <el-table-column prop="identificationNumber" label="身份证号" show-overflow-tooltip />
        <el-table-column prop="phoneNumber" label="手机号" show-overflow-tooltip />
        <el-table-column prop="sdhClassification" label="病情" show-overflow-tooltip />
        <el-table-column prop="systolic" label="最近一次高压" show-overflow-tooltip />
        <el-table-column prop="diastolic" label="最近一次低压" show-overflow-tooltip />
        <el-table-column prop="uploadTime" label="最近一次测量时间" show-overflow-tooltip />
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <div v-show="scope.row.care">
              <el-button icon="StarFilled" text type="primary"
                @click="UnlikeUser(scope.row.patientUid)">已特别关心</el-button>
            </div>
            <div v-show="!scope.row.care">
              <el-button icon="Star" text type="primary" @click="LikeUser(scope.row.patientUid)">点击特别关心</el-button>
            </div>
            <el-button icon="Bell" text type="primary" @click="remindUser(scope.row.patientUid)">提醒</el-button>
            <el-button icon="User" text type="primary" @click="gotoUserHome(scope.row.patientUid)">主页</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
    </div>
    <message-dialog ref="messageDialogRef" />
  </div>
</template>


<script setup lang="ts" name="systemPatientBase">
import { BasicTableProps, useTable } from "/@/hooks/table";
import { getPatientBasePage,changePatientLike } from "/@/api/patient/patientBase";
import { useDoctorInfo } from "/@/stores/doctorInfo";
import { useMessage } from '/@/hooks/message';
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router'

// 引入组件
const MessageDialog = defineAsyncComponent(() => import('../components/sendMessage.vue'));

const messageDialogRef = ref()

const router = useRouter()

// 定义查询字典

// 搜索变量
const queryRef = ref()
const showSearch = ref(true)
// 多选变量
const selectObjs = ref([]) as any
const multiple = ref(true)

const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {},
  pageList: getPatientBasePage
})

// 设置doctorUid，如果没有则置为null
const doctorUid = useDoctorInfo().doctorBaseInfo.doctorUid || null
state.queryForm.doctorUid = doctorUid

//  table hook
const {
  getDataList,
  currentChangeHandle,
  sizeChangeHandle,
  sortChangeHandle,
  downBlobFile,
  tableStyle
} = useTable(state)

// 清空搜索条件
const resetQuery = () => {
  // 清空搜索条件
  queryRef.value?.resetFields()
  // 清空多选
  selectObjs.value = []
  getDataList()
}

// 导出excel
const exportExcel = () => {
  downBlobFile('/pig/patientBase/export', Object.assign(state.queryForm, { ids: selectObjs }), 'patientBase.xlsx')
}

// 多选事件
const selectionChangHandle = (objs: { patientUid: string }[]) => {
  selectObjs.value = objs.map(({ patientUid }) => patientUid);
  multiple.value = !objs.length;
};

// 提醒指定用户
const remindUser = (patientUid: any) => {
  // console.log('remindUser', patientUid)
  messageDialogRef.value.openDialog({ doctorUid: doctorUid, patientUid: patientUid })
}

// 点击特别关注
const LikeUser = async (patientUid: any) => {
  if (doctorUid)
  {
    console.log('LikeUser', patientUid)
    const data = {
      patientUid: patientUid,
      doctorUid: doctorUid,
      care:1,
    }
    const res = await changePatientLike(data)
    if (res.code == 1)
    {
      useMessage().error(res.msg)
    } else
    {
      useMessage().success('特别关注成功')
    }
    getDataList()
  } else
  {
    useMessage().error('非医生用户不可特别关注')
  }
}

// 点击取消特别关注
const UnlikeUser = async (patientUid: any) => {
  if (doctorUid)
  {
    console.log('UnlikeUser', patientUid)
    const data = {
      patientUid: patientUid,
      doctorUid: doctorUid,
      care:0,
    }
    const res = await changePatientLike(data)
    if (res.code == 1)
    {
      useMessage().error(res.msg)
    } else
    {
      useMessage().success('取消关注成功')
    }
    getDataList()
  } else
  {
    useMessage().error('非医生用户不可特别关注')
  }
}

// 跳转到用户主页
const gotoUserHome = (patientUid: any) => {
  // 路由跳转
  router.push({ path: '/patient/patientInfo/index', query: { patientUid } })
}
</script>